<template>
  <div class="wrap padding-b b-select-flex" :class="link === 'webchat' ? 'b-select-row': ''">
    <el-form label-position="top" ref="form1" :model="form1" class="form-width" style="padding: 0">
      <el-form-item :label="label">
        <el-input size="mini" v-model.trim="form1.value" :disabled="disabled"></el-input>
      </el-form-item>
    </el-form>
    <el-form label-position="top" ref="form2" :model="form2" class="form-width" v-if="type==='dropdown' && cascade>'1'">
      <el-form label-position="top"  ref="form2" :model="form2">
        <el-form-item label="1" class="select-norequire visible-hide">
          <el-input size="mini" v-model.trim="form2.value" :disabled="disabled"></el-input>
        </el-form-item>
      </el-form>
    </el-form>
    <el-form label-position="top" ref="form3" :model="form3" class="form-width" v-if="type==='dropdown' && cascade>'2'">
      <el-form label-position="top"  ref="form3" :model="form3">
        <el-form-item label="1" class="select-norequire visible-hide">
          <el-input size="mini" v-model.trim="form3.value" :disabled="disabled"></el-input>
        </el-form-item>
      </el-form>
    </el-form>
    <el-form label-position="top" ref="form4" :model="form4" class="form-width" v-if="type==='dropdown' && cascade>'3'">
      <el-form label-position="top"  ref="form4" :model="form4">
        <el-form-item label="1" class="select-norequire visible-hide">
          <el-input size="mini" v-model.trim="form4.value" :disabled="disabled"></el-input>
        </el-form-item>
      </el-form>
    </el-form>
    <el-form label-position="top" ref="form5" :model="form5" class="form-width" v-if="type==='dropdown' && cascade>'4'">
      <el-form label-position="top"  ref="form5" :model="form5">
        <el-form-item label="1" class="select-norequire visible-hide">
          <el-input size="mini" v-model.trim="form5.value" :disabled="disabled"></el-input>
        </el-form-item>
      </el-form>
    </el-form>
  </div>
</template>
<script>
  import {getDicFromField} from '@/utils/workflowUtils.js'
  export default {
    name: 'BSelectShow',
    props: {
      label: String,
      default: {type: Array},
      id: String,
      dic: '',
      disabled: {type: String | Boolean, default: false},
      require: String,
      showOut: '',
      type: String,
      random: {type: Number, default: 0},
      field: {type: Object, default: function () { return {} }}
    },
    inject: ['link'],
    data () {
      return {
        form1: {
          value: ''
        },
        form2: {
          value: ''
        },
        form3: {
          value: ''
        },
        form4: {
          value: ''
        },
        form5: {
          value: ''
        },
        cascade: '1'
      }
    },
    methods: {
    },
    computed: {
    },
    watch: {
    },
    beforeMount () {
      let dic = getDicFromField(this.field, this.$getCache('custTmpls'), this.$getCache('options')) || {cascade: 0}
      this.cascade = dic.cascade.toString()
    },
    mounted () {
      this.form1.value = ''
      this.$nextTick(() => {
        for (let i = 0; i < this.cascade; i++) {
          if (this.type === 'dropdown') {
            this['form' + (i + 1)].value = this.default[i]
          }
          if (this.type === 'dropdownTree') {
            if (this.default[i]) {
              this.form1.value += i ? ('-->' + this.default[i]) : this.default[i]
            }
          }
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl";
  .padding-b
    padding-bottom 8px
    display flex
  .width-full
    width 100%
  .form-width
    width 100%
  .b-select-row
    display block
    .select-norequire
      padding-left 0px
</style>
